<template>
	<view class="content">

		<!-- 	<view class="card">
			<view class="card-line">
				<text id="tv_bank_name">交通银行</text>
				<text id="tv_bank_user">持卡人：{{userBank}}</text>
			</view>
			<view class="card-line2">
				<text id="tv-bank-num">6666 8888 2222 7211</text>
			</view>
		</view> -->


		<scroll-view scroll-y="true" @scrolltoupper="handleScrollToUpper"
			style="max-height: calc(100vh - 20vh); min-height: calc(100vh - 20vh); display: flex; flex-direction: column;  align-items: center; width: 90%; ">
			<block v-for="(item,index) in bankList">

				<view class="slide-main">

					<liu-swipe-action class="liu-swipe-action" :btn-list="options" :index="index"
						@clickItem="clickItem">
						<view>
							<view class="card">
								<view style="height: 20rpx;"></view>
								<view class="card-line">

									<text id="tv_bank_name">{{item.bank_name}}</text>
									<text id="tv_bank_user">持卡人：{{item.bank_user}}</text>
								</view>
								<view class="card-line2">
									<text id="tv-bank-num">{{item.bank_sn}}</text>
								</view>
							</view>
						</view>

					</liu-swipe-action>


				</view>
			</block>

		</scroll-view>
		<view class="btn-layout" @click="goAddBank">
			<text>+ 添加银行卡</text>
		</view>

		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" confirmText="确定" title="确认删除" :content="popupContent"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import ajax from '@/api/api.js';
	import url from '@/api/url.js';
	export default {
		data() {
			return {
				popupContent: '',
				options: [{
					id: '0',
					name: '删除',
					width: '128rpx',
					bgColor: '#F53232',
					color: '#FFFFFF',
					fontSize: '28rpx'
				}],
				bankList: [],
				clickBean: {}
			}
		},
		onLoad() {

		},

		onShow() {
			this.getBankList();
		},

		methods: {
			getBankList() {
				ajax(url.myBank, {
					data: {
						// #ifdef MP-WEIXIN
						// #endif
						is_xcx: 1,

					}
				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							title: res.data.msg
						})
						return;
					}
					this.bankList = res.data.data
					console.log("this.bankList============" + this.bankList)
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.log(err)
					uni.stopPullDownRefresh();
				});


			},

			bankDel(bank_id) {
				ajax(url.myBankDel, {
					data: {
						// #ifdef MP-WEIXIN
						// #endif
						is_xcx: 1,
						bank_id: bank_id

					}
				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return;
					}
					this.getBankList()
				});
			},

			//点击操作回调事件
			clickItem(e) {
				console.log('所点击的列表索引：' + e.index)
				console.log('所点击的按钮id：' + e.id)
				this.clickBean = this.bankList[e.index]
				this.popupContent = '确定要删除' + this.clickBean.bank_sn
				this.$refs.alertDialog.open('warn')
				// this.bankDel(this.bankList[0].id)
			},

			dialogConfirm() {
				this.bankDel(this.clickBean.id)
			},
			goAddBank() {
				uni.navigateTo({
					url: '/pages/finance/bank-add'
				})
			},
			onPullDownRefresh() {
				this.getBankList()
			},
			handleScrollToUpper() {
			},
			
			

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: $app-page-color;
		align-items: center;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.slide-main {


			.liu-swipe-action {

				display: flex;
				margin-top: 15rpx;

				.card {
					border-radius: 10rpx;
					background-color: $app-staus-color;
					height: 183rpx;

					.card-line {


						display: flex;
						flex-direction: row;

						#tv_bank_name {

							margin-left: 40rpx;
							font-size: 28rpx;
							color: white;
						}

						#tv_bank_user {
							color: white;
							font-size: 26rpx;
							margin-left: 27rpx;
						}
					}

					.card-line2 {
						margin-top: 20rpx;
						margin-bottom: 50rpx;

						#tv-bank-num {

							font-size: 36rpx;
							margin-left: 159rpx;
							color: white;
						}
					}
				}
			}
		}

		.btn-layout {
			border-radius: 10rpx;
			font-size: 28rpx;
			justify-content: center;
			display: flex;
			align-items: center;
			color: $app-staus-color;
			background-color: white;
			width: 90vw;
			height: 102rpx;
		}

	}
</style>